<template>
    <div class="inputDom" :style="myStyles">
        <input class="myInput" :placeholder="hits" v-model="inputValue" :class="isHit ? 'pd3' : ''">
        <div class="leftText">{{ leftText }}</div>
        <img v-show="isShowRightImg" class="img1" src="../../assets/images/search2.png" @click="search" />
    </div>
</template>
    
<script>

export default {
    name: 'CommonSearch',
    components: {
    },
    props: {
        hit: {
            default: '',
            type: String
        },
        leftText: {
            default: '',
            type: String
        },
        isShowRightImg: {
            default: false,
            type: Boolean
        },
        myStyles: {
            default: { width: '160px' }
        },

        isSave: Boolean,
        isMust: {
            default: false,
            type: Boolean
        },
        mustHit: {
            default: '',
            type: String
        },
    },
    data() {
        return {
            inputValue: '',
            hits: this.hit,
            isHit: false,
        }
    },
    mounted() {
    },
    methods: {
        inputReturn() {
            if (this.isMust && !String(this.inputValue)?.trim()) {
                this.hits = this.mustHit
                this.isHit = true
                return;
            }
            return this.inputValue
        }
    },
    watch: {
        isSave: {
            handler() {
                this.inputReturn()
            }
        },
        inputValue: {
            handler() {
                this.isHit = false
            }
        }
    },
    computed: {
    }

}
</script>
    
<style scoped>
.inputDom {
    display: flex;
    align-items: center;
    position: relative;
}

.myInput {
    outline: none;
    height: 22px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 8px;
    padding-right: 20px;
    border-radius: 3px;
    font-size: 12px;
    position: relative;
    margin: 1px;
    width: 100%;
}

.myInput:focus {
    border: 1px solid #6698ff;
}

.leftText {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 12px;
}

.pd3 {
    padding-left: 15px;
    padding-right: 10px;
    color: red;
    border: 1px solid red;
}

.pd3::placeholder {
    color: red;
}

.img1 {
    position: absolute;
    width: 15px;
    height: 15px;
    right: 8px;
}
</style>